<!DOCTYPE html>
<html>

<head lang="en">
    <title>找攻略</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <link href="/css/comment/style.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/strategyComment.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/A-emoji.css">
    <script src="/js/plugins/A-emoji.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/common.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>


</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img  class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span render-html="releaseTime"></span>
            浏览 <span render-html="browse"></span>
            回复 <span> 0</span>
        </small>

    </div>

    <div class="count d-flex justify-content-between">
        <div class="p-2">评论<span id="totalComments" ></span></div>
        <div class="p-2">赞<span >20</span></div>
    </div>
</div>



<div>
    <form action="/travels/comments" method="post" class="tjpl-form" id="submitForm">
        <textarea name="content"></textarea>
        <input type="hidden" name="travel.id">
        <div class="tjpl">
            <input type="text" id="submitComment" value="提交评论" />
        </div>
    </form>

    <div class="replyment">
        <div render-loop="list">
            <div class="commentBox">
                <div class="li">
                    <div class="icon" style="width: 50px">
                        <a href="/userProfiles.html?id=" render-fun="setHref" render-key="list.user.id">
                            <img render-src="list.user.headImgUrl">
                        </a>
                    </div>
                    <div class="content">
                        <!--当前评论的id-->
                        <div class="name" render-html="list.user.nickName" id="nickName"></div>
                        <div class="time" render-html="list.createTime"></div>
                        <div class="text" render-html="list.content" id="replyContent"></div>
                        <hr>
                        <div render-loop="list.replyComments">


                            <div render-attr="data-id=list.id">
                                <a role="button" render-html="list.replyComments.replyUser.nickName"
                                   style="color: #c64355" class="nickName"
                                   render-attr="data-id=list.replyComments.replyUser.id"></a>

                                回复: <a role="button" render-html="list.replyComments.commentUser.nickName"
                                       style="color: #c7df69" class="nickName"
                                       render-attr="data-id=list.replyComments.commentUser.id"></a>---------

                                <span render-html="list.replyComments.content"></span>

                            </div>
                        </div>
                        <div class="d-flex icon" render-attr="data-id=list.id" id="travelCommentId">

                            <div>
                            <!--<hr>-->
                                <i class="replyBtn" style="margin-left: 270px"
                                   render-attr="data-id=list.user.id"> ^_^ </i>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!--<div class="operation">
			<div class="d-flex justify-content-between">
				<a role="button" id="addBtn">
					<div class="p-2"><i class="fa fa-commenting-o"></i>赞赞赞</div>
				</a>
				<div class="p-2"><i class="fa fa-star-o"></i></div>
			</div>
		</div>-->
<!--<div class="huifu-s">
    <span class="re-show">[回复]</span>
    <span class="re-hide">[收起回复]</span>
</div>
<div class="reply">
    <form action="#" method="get">
        <textarea></textarea>
        <div class="re-tijiao">
            <input type="submit" value="提交回复" />
        </div>
    </form>
</div>-->


<!--评论模态框-->
<div class="modal fade" id="replyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">评论回复内容</h4>
            </div>
            <div class="modal-body">
                <form action="/travelComments/replyComments" method="post" id="replyForm">
                    <div class="form-group">
                        <!--评论的内容-->
                       <!-- <label for="recipient-name" class="control-label">内容:</label>-->
                        <textarea type="text" class="form-control"  name="content"></textarea>
                        <!--评论人的id-->
                        <input type="hidden" name="travelComment.id">
                        <input type="hidden" name="commentUser.id">
                        <input type="hidden" name="replyUser.id">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveBtn">评论</button>
            </div>
        </div>
    </div>
</div>

<!--
回复相关的弹框
<div id="wrapper">
    <div class="box">
        <div id="dialogBg"></div>
        <div id="dialog" class="animated">
            <img class="dialogIco" width="50" height="50" src="/images/ico.png" alt=""/>
            <div class="dialogTop">
                <a href="javascript:;" class="claseDialogBtn">关闭</a>
            </div>
            <form action="" method="post" id="editForm">
                <input type="hidden" name="commentId" id="commentId">
                <ul class="editInfos">
                    <li>
                        <label><font color="#ff0000">* </font>
                        评论内容：<input type="text" name="content" id="content" required
                                    class="ipt"/>
                    </label></li>
                    <li><input type="button" value="确认提交" class="submitBtn"/></li>
                </ul>
            </form>
        </div>
    </div>

</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"></div>
-->

<script>
    $(function () {
        var params = getParams();

        if (!params.id) {
            return;
        }
        //渲染游记的封面
        $.get("/travels",{id:params.id},function (data) {
            $(".travels").renderValues(data);

        })


        var currentPage = 1;
        var totalPage=1;
        var list = [];

        //查询方法------------------------------------------------
        function query() {
            //查询出该游记下所有的游记评论
            $.get("/travels/"+params.id+"/comments",{currentPage:currentPage},function (data) {
                console.log(data);
                $("#totalComments").html(data.total);
                $.merge(list,data.list);
                totalPage = data.pages;
                $(".replyment").renderValues({list:list}, {
                    setHref: function(item,value) {
                        var url = $(item).data("href");
                        $(item).attr('href',url+value);
                    }
                });

                //回复按钮绑定事件
                $(".replyBtn").click(function () {
                    $("#replyForm").clearForm();
                    var travelCommentId =$(this).closest("#travelCommentId").data("id");
                    var commentUserId = $(this).data("id");
                    $("[name='commentUser.id']").val(commentUserId);
                    $("[name='travelComment.id']").val(travelCommentId);
                    $("#replyModal").modal("show");
                });


                //昵称绑定点击回复事件
                $(".nickName").click(function () {
                    $("#replyForm").clearForm();
                    var travelCommentId =$(this).closest("div").data("id");
                    //console.log(strategySunCommentId);
                    var commentUserId = $(this).data("id");
                    $("[name='commentUser.id']").val(commentUserId);
                    $("[name='travelComment.id']").val(travelCommentId);
                    //$("#replyForm").attr("action", "/strategySunComments/replyComments")
                    $("#replyModal").modal("show");
                })

            });
            currentPage +=1;

        }

        //jrender渲染对象------------------------------------
        query();

        //滑动分页--------------------------------------------
        $(window).scroll(function () {
            if ($(window).height() + $(window).scrollTop()>= $(document).height()) {
                if (currentPage <= totalPage) {
                    query();
                } else {
                    $(document).dialog({
                        type : 'notice',
                        infoText: '亲.我也是有限度的',
                        autoClose: 2500,
                        position: 'bottom'  // center: 居中; bottom: 底部
                    });
                }
            }
        });

        //提交评论---------------------------------------------
        $("#submitComment").click(function () {
            $("[name='travel.id']").val(params.id);
            $("#submitForm").ajaxSubmit(function (data) {
                if(data.success){
                    $(document).dialog({
                        type: 'alert',
                        closeBtnShow: false,
                        content: '评论成功',
                    })
                    setTimeout(function () {
                        location.reload();
                    }, 500);
                }
            })
        })


        //评论点击事件
        $("#saveBtn").click(function () {
            $("#replyForm").ajaxSubmit(function (data) {
                if (data.success) {
                    $(document).dialog({
                        type: 'alert',
                        closeBtnShow: false,
                        content: '评论成功',
                    })
                    setTimeout(function () {
                        location.reload();
                    }, 500);
                }
            })
        })
    })
</script>
</body>

</html>